<template>
  <div style="margin:30px;margin-top:1px">
    <el-row >
      <el-col  :span="4">
        <el-button style="padding-left:50px;padding-right:50px;height:30px;line-height:0" type="primary" @click="$router.push({ name: 'message'})" plain>返回</el-button>
      </el-col>
    </el-row>
    <h3 style="margin-top:30px">学生信息</h3>
    <el-row >
      <el-col :span="12">
        <el-row class="totality">
          <el-col  :span="8">
            <div class="l-top-50 grid-content bg-purple">姓名</div>
          </el-col>
          <el-col :span="16">
            <div class="r-top-50-0 grid-content bg-purple">{{studentDetail.name || '/'}}</div>
          </el-col>
        </el-row>
        <el-row class="totality">
          <el-col :span="8">
            <div class="l-50 grid-content bg-purple">年龄</div>
          </el-col>
          <el-col :span="16">
            <div class="r-50-0 grid-content bg-purple">{{studentDetail.age || '/'}}</div>
          </el-col>
        </el-row>
        <el-row class="totality">
          <el-col :span="8">
            <div class="l-50 grid-content bg-purple">课程</div>
          </el-col>
          <el-col :span="16">
            <div class="r-50-0 grid-content bg-purple">{{studentDetail.course || '/'}}</div>
          </el-col>
        </el-row>
        <el-row class="totality">
          <el-col :span="8">
            <div class="l-50 grid-content bg-purple">班级名称</div>
          </el-col>
          <el-col :span="16">
            <div class="r-50-0 grid-content bg-purple">{{studentDetail.className || '/'}}</div>
          </el-col>
        </el-row>
        <el-row class="totality">
          <el-col :span="8">
            <div class="l-50 grid-content bg-purple">合同编号</div>
          </el-col>
          <el-col :span="16">
            <div class="r-50-0 grid-content bg-purple">{{studentDetail.contractCode || '/'}}</div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="12">
        <el-row class="totality">
          <el-col :span="8">
            <div class="l-top-50 grid-content bg-purple">性别</div>
          </el-col>
          <el-col :span="16">
            <div class="r-top-50 grid-content bg-purple">{{studentDetail.sex || '/'}}</div>
          </el-col>
        </el-row>
        <el-row class="totality">
          <el-col :span="8">
            <div class="l-50 grid-content bg-purple">身份证</div>
          </el-col>
          <el-col :span="16">
            <div class="r-50 grid-content bg-purple">{{studentDetail.idCard || '/'}}</div>
          </el-col>
        </el-row>
        <el-row class="totality">
          <el-col :span="8">
            <div class="l-50 grid-content bg-purple">课程费用</div>
          </el-col>
          <el-col :span="16">
            <div class="r-50 grid-content bg-purple">{{studentDetail.money || '/'}}</div>
          </el-col>
        </el-row>
        <el-row class="totality">
          <el-col :span="8">
            <div class="l-50 grid-content bg-purple">开班时间</div>
          </el-col>
          <el-col :span="16">
            <div class="r-50 grid-content bg-purple">{{studentDetail.classTime || '/'}}</div>
          </el-col>
        </el-row>
        <el-row class="totality">
          <el-col :span="8">
            <div class="l-50 grid-content bg-purple">合同起止时间</div>
          </el-col>
          <el-col :span="16">
            <div class="r-50 grid-content bg-purple">{{studentDetail.contractTime || '/'}}</div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
     <el-row class="totality" style="height: 200px">
      <el-col  :span="4" style="height: 100%">
        <div class="grid-content bg-purple l-200" style="height: 100%">合同内容</div>
      </el-col>
       <el-col :span="20">
        <div class="grid-content bg-purple r-200 " style="border-bottom: 1px solid #e1e8ef;">
           <!-- 如果既有图片又有压缩包格式 -->
            <div v-if="informShow==2" style="display:flex;align-items:center">
              <div style="margin-top:10px;padding-left:10px;display:inline-block;display:flex;">
                 <el-image  v-for="(v,i) in informListData"  :key="i" style="width:auto;height:120px;margin-right:20px;padding-left:10px; padding-bottom:20px" :src="v.url" alt="" :preview-src-list="[v.url]"> </el-image>
              </div>
              <div  v-for="(item,index) in informListDataZip " :key="index" style="display:flex;margin-right:20px;display:inline-block;margin-left:10px">
                <img v-if="item.name==='.zip'" style="width:50px;height:50px;" src="~@/assets/img/zip.png" alt="">
                <img v-if="item.name==='.doc' || item.name==='.docx'"  style="width:50px;height:50px;" src="~@/assets/img/word.png" alt=""> 
                <img v-if="item.name==='.xls' || item.name==='.xlsx'" style="width:50px;height:50px;" src="~@/assets/img/excel.png" alt="">
                <img v-if="item.name==='.pdf' || item.name==='.pptx'" style="width:50px;height:50px;" src="~@/assets/img/ppt.png" alt="">
                <div class="down" @click="down(item.url)">
                  <span>下载</span>
                </div>
              </div>
            </div>
            <!-- 只有压缩包格式 -->
            <div v-if="informShow==1" style="display:inline-block;margin-top:10px;padding-left:10px">
              <div   v-for="(item,index) in informListDataZip " :key="index" style="display:flex;margin-right:20px">
                <img v-if="item.name==='.zip'" style="width:50px;height:50px;" src="~@/assets/img/zip.png" alt="">
                <img v-if="item.name==='.doc' || item.name==='.docx'"  style="width:50px;height:50px;" src="~@/assets/img/word.png" alt=""> 
                <img v-if="item.name==='.xls' || item.name==='.xlsx'" style="width:50px;height:50px;" src="~@/assets/img/excel.png" alt="">
                <img v-if="item.name==='.pdf' || item.name==='.pptx'" style="width:50px;height:50px;" src="~@/assets/img/ppt.png" alt="">
                <div class="down" @click="down(item.url)" style="padding-top:20px">
                  <span>下载</span>
                </div>
              </div>
            </div>
            <!-- 只有图片格式 -->
            <div  v-if="informShow==0" style="display:flex">
              <div  v-for="(item,index) in informListData " :key="index" style="display:flex;margin-right:20px;padding-left:10px;">
               <el-image   style="width:auto;height:170px;" :src="item.url" alt="" :preview-src-list="[item.url]"> </el-image>
              </div>
            </div>
        </div>
      </el-col>
    </el-row>
    <el-row style="margin-top: 80px">
      <el-col  :span="10">
        <div>&nbsp;</div>
      </el-col>
      <el-col  :span="4">
        <el-button style="padding-left:50px;padding-right:50px;height:30px;line-height:0" type="primary" @click="$router.push({ name: 'message', params: {id:'student'} })" plain>返回</el-button>
      </el-col>
      <el-col :span="10">
        <div>&nbsp;</div>
      </el-col>
    </el-row>
   
  </div>
</template>

<script>


  export default {
    data() {
      return {
        type: 'D',
        txtVal: 0,
        // 传递过来的学院统计信息详情数据
        studentDetail:{},
        // 拒绝弹窗实时输入的内容数据绑定
        textarea:'',
        inputContent:'',
        // 学员id
        studentId:'',
        // type: this.$route.params.type
           // 是否显示压缩包区域
        informShow:0,
        lnformZipShow:0,
         // 附件内容图片列表
        informListData:[],
        // 附件内容压缩包列表
        informListDataZip:[],
      }
    },
    computed: {},
    created() {
      this.type = this.$route.params.id
      this.studentId=this.$route.params.item.studentId
      console.log('获取传递过来的学员信息详情数据',this.$route.params)
      console.log(this.$route.params.id)
      // 获取教职信息详情数据
      this.getStudentDetailData()
    },
     watch: {
      $route: {
        deep: true,
        immediate: true,
        handler(val) {
          if(val){
            let path=val.name
            if(path=='student-particulars'){
              console.log('频繁调取',val.params.item)
              this.studentId=val.params.item.studentId
              console.log('获取传递的学员id',this.studentId)
              this.getStudentDetailData()
            }
          }
        }
      }
    },
    methods: {
       // 获取学员信息详情数据
      getStudentDetailData(){
          this.$http({
          url: this.$http.adornUrl('/info/studentDetails?studentId='+this.studentId
          ),
          method: 'post',
          data:{}
        }).then(res=>{
          this.studentDetail=res.data.data
           this.getUrlChangeUrlListData(res.data.data.contractUrl)
          console.log('获取学员息详情数据', this.studentDetail)
        })
      },
       // 拒绝弹窗实时输入事件
      textInputChange(event){
        console.log('实时输入',event)
        this.inputContent=event
      },
      open() {
        const imga = require("../../../../assets/img/审批完成2.png");
        this.$alert('<strong><img style="width: 70%;margin-left: 15%;" src='+ imga +'><div style="text-align: center;">审批通过</div></strong>', '', {
          dangerouslyUseHTMLString: true,
          showConfirmButton: false
        });
      },
      openText() {
        this.$alert('<textarea class="textarea_border" v-model="formData.field101" rows="15" cols="50" maxlength="500" @input="descInput" placeholder="请输入拒绝原因" ></textarea> <span class="numberV" style="position: absolute; right: 15px;bottom: 2px;">' + this.txtVal + '/500</span>', '原因', {
          dangerouslyUseHTMLString: true,
          cancelButtonClass: "el-confirm"
        });
      },
        down(url) {
        window.open(url)
      },
      descInput(){
        this.txtVal = this.formData.field101.length;
      },
// 附件内容格式化
        getUrlChangeUrlListData(url){
         this.informListData=[]
        // 附件内容压缩包列表
        this.informListDataZip=[]
        if(url){
          console.log('需要转换的url',url)
          // 判断是否为json字符串在做解析
          if(url.indexOf("[")!= -1){
            console.log('走是否包含数组的1')
            var img=JSON.parse(url)
            if(url.indexOf(".png")!= -1 && url.indexOf(".zip")!= -1){
              console.log('11111111',url)
              this.informShow=2
              img.forEach((item,index)=>{
                let type=img[index].substring(img[index].lastIndexOf('.')).toLowerCase()
                if(type=='.jpg' || type=='.jpeg' ||  type=='.png'){
                  let obj={
                    name:type,
                    url:img[index]
                  }
                  this.informListData.push(obj)
                }else {
                    let obj={
                    name:type,
                    url:img[index]
                  }
                  this.informListDataZip.push(obj)
                }
              })
              console.log('都有',this.informListData,this.informListDataZip)
            }else if(url.indexOf(".png")!= -1 || url.indexOf(".jpg")!= -1  || url.indexOf(".jpeg")!= -1 ){
              console.log('22222222',url)
              this.informShow=0
              img.forEach((item,index)=>{
                let type=img[index].substring(img[index].lastIndexOf('.')).toLowerCase()
                let obj={
                  name:type,
                  url:img[index]
                }
                this.informListData.push(obj)
              })
              console.log('只有图片',this.informListData)
            }else {
              console.log('22222222',url)
              console.log('只有压缩包')
              this.informShow=1
              let img=JSON.parse(url)
              img.forEach((item,index)=>{
                let type=img[index].substring(img[index].lastIndexOf('.')).toLowerCase()
                let obj={
                  name:type,
                  url:img[index]
                }
                this.informListDataZip.push(obj)
              })
            }
          }else {
            console.log('走是否包含数组的2')
            // 如果不是json穿格式直接push到数组里
            let type=url.substring(url.lastIndexOf('.')).toLowerCase()
            console.log('type',type)
            if(type=='.jpg' || type=='.jpeg' || type=='.png'){
              this.informShow=0
              // 将字符串转换为数组
              let arr=url.split(',')
              console.log('arr',arr)
              arr.forEach(item=>{
                let obj={
                  name:type,
                  url:item
                }
                this.informListData.push(obj)
              })
              console.log('push',this.informListData)
            }else {
              this.informShow=1
              let obj={
                name:type,
                url:url
              }
                this.informListDataZip.push(obj)
            }
            console.log('不是json穿',url,this.informListData)
          }
        }
      },

    }
  }
</script>
<style>
  .right-r {
    padding: 13px 13px 13px 33px;
    border: 1px solid  #e1e8ef;
    border-left: 0px solid  #e1e8ef;
  }
  .left-l {
    padding: 13px 13px 13px 33px;
    background: #ecf4fb;
    border: 1px solid  #e1e8ef;

  }
</style>

